<!--
  -    Copyright (c) 2018-2025, hycloud All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: hycloud
  -->
<template>
    <div class="execution">
        <basic-container>
            <avue-crud ref="crud"
                       :page.sync="page"
                       :data="tableData"
                       :table-loading="tableLoading"
                       :option="tableOption"
                       @on-load="getList"
                       @search-change="searchChange"
                       @refresh-change="refreshChange"
                       @size-change="sizeChange"
                       @current-change="currentChange"
                       @row-update="handleUpdate"
                       @row-save="handleSave"
                       @row-del="rowDel">
                        <template slot="menuLeft">
                            <el-button
                            icon="el-icon-circle-plus"
                            size="small"
                            type="primary"
                            @click="openDialogform">新增</el-button>
                        </template>
                        <template slot="completeRate" slot-scope="scope">
                            {{scope.row.newcompleteRate}}
                        </template>
                       <template slot="menu" slot-scope="scope">
                            <el-button type="text"
                            icon="el-icon-circle-view"
                            size="small"
                            @click="viewNodeForm1(scope)">入库详情</el-button>
                            <el-button type="text"
                            icon="el-icon-circle-view"
                            size="small"
                            v-if="scope.row.billId"
                            @click="goDetail(scope)">审批详情</el-button>
                            <el-button type="text"
                            icon="el-icon-circle-edit"
                            size="small"
                            @click="viewNodeForm1(scope, 1)" v-if="(!scope.row.status || scope.row.status === '2') && scope.row.bizStatus !== '1'">登账</el-button>
                        </template>
            </avue-crud>
        </basic-container>
        <el-dialog
            :visible.sync="modal"
            v-if="modal"
            title="新增入库"
            width="1000px"
            @close="closeDialog"
            top="5vh"
            :close-on-click-modal="false"
            append-to-body>
            <div class="ck-designer">
                <el-form ref="form" :rules="rules" :model="form" label-width="100px">
                    <el-form-item label="标题" prop="bizTitle">
                        <el-input v-model="form.bizTitle"></el-input>
                    </el-form-item>
                    <el-form-item label="采购缘由" prop="reason">
                        <el-input type="textarea" v-model="form.reason"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="form.remark" :maxlength="512"></el-input>
                    </el-form-item>
                </el-form>
                <el-button icon="el-icon-circle-plus"
                            size="small"
                            style="margin-bottom: 10px"
                            type="primary"
                            @click="choseMember">新增</el-button>
                <el-table
                    :data="tableData1"
                    border
                    stripe
                    style="width: 100%">
                    <el-table-column
                        prop="name"
                        label="物品名称">
                    </el-table-column>
                    <el-table-column
                        prop="preAmount"
                        label="数量">
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.preAmount" :min="0"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="unit"
                        label="物品单位">
                    </el-table-column>
                    <!-- <el-table-column
                        prop="limitAmount"
                        label="限额数量">
                    </el-table-column> -->
                    <el-table-column
                        prop="stockAmount"
                        label="入库/出库前库存数量">
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="alarmHandle('form')">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            :visible.sync="modal2"
            v-if="modal2"
            :title="title1"
            width="1000px"
            top="5vh"
            :close-on-click-modal="false"
            append-to-body>
            <div class="ck-designer">
                <el-form ref="form1" :model="form1" label-width="100px">
                    <el-form-item label="标题" prop="bizTitle">
                        <el-input v-model="form1.bizTitle" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="采购缘由" prop="reason">
                        <el-input type="textarea" v-model="form1.reason" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="form1.remark" disabled></el-input>
                    </el-form-item>
                </el-form>
                <el-table
                    :data="tableData2"
                    border
                    stripe
                    style="width: 100%">
                    <el-table-column
                        prop="name"
                        label="物品名称">
                    </el-table-column>
                    <el-table-column
                        prop="preAmount"
                        label="申请数量">
                        <template slot-scope="scope">
                           {{scope.row.preAmount}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="realAmount"
                        align="center"
                        label="已入库数量">
                        <template slot-scope="scope">
                            {{scope.row.realAmount}}
                        </template>
                    </el-table-column>
                     <el-table-column
                        prop="currentAmount"
                        width="155"
                        v-if="changFlag"
                        label="此次入库数量">
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.currentAmount" :min="0"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="completeRate"
                         align="center"
                        label="入库完成率">
                        <template slot-scope="scope">
                            {{scope.row.newcompleteRate}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="unit"
                        align="center"
                        label="物品单位">
                    </el-table-column>
                    <el-table-column
                        prop="stockAmount"
                        align="center"
                        width="180"
                        label="入库/出库前库存数量">
                        <template slot-scope="scope">
                            {{scope.row.stockAmount}}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column
                        prop="limitAmount"
                        label="限额数量">
                    </el-table-column> -->
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer" v-if="changFlag">
                <el-button @click="modal2 = false">取 消</el-button>
                <el-button type="primary" @click="alarmHandle1()">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            :visible.sync="modal1"
            v-if="modal1"
            title="审批申请"
            width="1200px"
            top="5vh"
            class="view-dialog"
            :close-on-click-modal="false"
            append-to-body>
            <div class="form-designer">
                <!-- <widget-form ref="widgetForm"
                :select.sync="widgetFormSelect"
                :data="widgetForm"
                @getModal="getModal"
                ></widget-form> -->
                <view-form
                   :option="option1"
                   @getModal1="getModal1"
                   :dataobj="dataobj"
                ></view-form>
            </div>
        </el-dialog>
        <choose-member v-if="showChose" :labelkey="labelkey" :url1="url1" :url2="url2" :title="title" :columns1="columns1" :columns="columns" :type="type" :flKey="flKey"></choose-member>
    </div>
</template>

<script>
    import {fetchOaPurList, getObj,  addObj, putObj, delObj, billAccountStatus} from '@/api/officegoods/oaofficegoodspurchasebill'
    import {tableOption} from '@/const/crud/officegoods/out'
    import chooseMember from '@/components/chooseMember'
    import eventBus from '@/util/eventBus'
    import {accMul} from '@/util/util'
    import addView from '@/mixins/addView'
    import RenderForm from '@/components/table-design/newRender'
    import ViewForm from '@/components/table-design/viewRender'
    import {mapGetters} from 'vuex'

    export default {
        name: 'officegoodsstockrecord',
        mixins: [addView],
        components: { RenderForm, ViewForm, chooseMember },
        data() {
            return {
                rules: {
                    bizTitle: [
                        { required: true, message: '请输入标题', trigger: 'blur' },
                        { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
                    ],
                    reason: [
                        { required: true, message: '请输入采购缘由', trigger: 'blur' },
                        { min: 1, max: 512, message: '长度在 1 到 512 个字符', trigger: 'blur' }
                    ],
                },
                changFlag:false,
                flKey: 'categoryId',
                url1: '',
                url2: '',
                type:'',
                columns:[],
                columns1:[],
                title1: '',
                title: '',
                labelkey: '',
                flList: [],
                showChose: false,
                form:{},
                form1:{},
                modal: false,
                modal1: false,
                modal2: false,
                tableData1: [],
                tableData2: [],
                searchForm: {},
                form: {
                    bizTitle:'',
                    reason:'',
                    remark:'',
                    stockRecordList:[],
                },
                option: [],
                bizId: '',
                tableData: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                tableLoading: false,
                tableOption: tableOption
            }
        },
        computed: {
            ...mapGetters(['permissions', 'tagList'])
        },
        created() {
            this.eventBusHandle()
        },
        methods: {
            closeDialog() {
                this.modal = false
                this.form = {}
                this.tableData1 = []
            },
            goDetail(scope) {
                let tag = this.tagList.filter(item => {
                    return item.value.indexOf('/db/detail') !== -1
                })
                if (tag.length > 0) {
                    this.$router.$avueRouter.closeTag(tag[0])
                }
                this.$router.push({
                    name: '流程详情',
                    params: {
                        id: scope.row.billId,
                        newtitle: '流程详情'
                    }
                })
            },
            alarmHandle(formName) {
                let _this = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.tableData1.length  === 0) {
                            this.$message.error('请新增物品')
                            return
                        } else {
                            let stockRecordList = []
                            let flag = true
                            _this.tableData1.map(item => {
                                if (!item.preAmount && flag) {
                                    flag = false
                                    this.$message.error('请填写物品数量')
                                    return
                                }
                                stockRecordList.push({
                                    officegoodsId: item.officegoodsId,
                                    preAmount: item.preAmount
                                })
                            })
                            if (flag) {
                                this.form.stockRecordList = stockRecordList
                                addObj(this.form).then(data => {
                                    this.$message.success('添加成功')
                                    this.getList(this.page)
                                    this.closeDialog()
                                })
                            }
                        }
                    }
                })
            },
            getModal1(val) {
                this.modal1 = val
                this.getList(this.page)
            },
            alarmHandle1() {
                let params = {
                    bizId: this.bizId
                }
                this.tableData2.map(item => {
                    if (!item.currentAmount) {
                        item.currentAmount = 0
                    }
                })
                params.stockRecordList = this.tableData2
                billAccountStatus(params).then(data => {
                    this.$message.success('登账成功')
                    this.getList(this.page)
                    this.modal2 = false
                })
            },
            viewNodeForm1(scope, key) {
                this.title1 = '详情' 
                if (key) {
                    this.title1 = '登账'
                }
                this.bizId = scope.row.bizId
                getObj(scope.row.bizId).then(response => {
                    this.form1 = response.data.data
                    response.data.data.stockRecordList.map(item => {
                        item.newcompleteRate = accMul(100, item.completeRate) + '%'
                    })
                    this.tableData2 = response.data.data.stockRecordList
                    this.modal2 = true
                    if (key) {
                        this.changFlag = true
                    } else {
                        this.changFlag = false
                    }
                })
            },
            choseMember () {
                this.type = "checkbox"
                this.labelkey = 'officegoodsList'
                this.url1 = '/act/officegoodscategory/tree'
                this.url2 = '/act/officegoodsstock/page'
                this.title = '用品类别'
                this.columns = [
                {
                    title: '用品名',
                    dataIndex: 'name',
                    key: 'name',
                    width: 150
                },
                {
                    title: '简称',
                    key: 'pinyin',
                    width: 100,
                    dataIndex: 'pinyin',
                },
                {
                    title: '用品单位',
                    key: 'unit',
                    width:100,
                    align: 'center',
                    dataIndex: 'unit',
                }
                ]
                this.columns1 = [
                {
                    title: '用品名',
                    dataIndex: 'name',
                    key: 'name' 
                },
                {
                    title: '操作',
                    key: 'action',
                    scopedSlots: { customRender: 'action' },
                },
                ]
                this.flKey === 'categoryId'
                this.showChose = true
            },
            eventBusHandle () {
                let _this = this
                eventBus.$on('getMember', function (data) {
                    _this.tableData1 = data.officegoodsList
                })
            },
            openDialogform() {
                this.modal = true
            },
            getList(page, params) {
                this.tableLoading = true
                fetchOaPurList(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params, this.searchForm )).then(response => {
                    response.data.data.records.map(item => {
                        item.newcompleteRate = accMul(100, item.completeRate) + '%'
                    })
                    this.tableData = response.data.data.records
                    this.page.total = response.data.data.total
                    this.tableLoading = false
                }).catch(() => {
                    this.tableLoading=false
                })
            },
            rowDel: function (row, index) {
                this.$confirm('是否确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    return delObj(row.id)
                }).then(data => {
                    this.$message.success('删除成功')
                    this.getList(this.page)
                })
            },
            handleUpdate: function (row, index, done,loading) {
                putObj(row).then(data => {
                    this.$message.success('修改成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading();
                });
            },
            handleSave: function (row, done,loading) {
                addObj(row).then(data => {
                    this.$message.success('添加成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading();
                });
            },
            sizeChange(pageSize){
                this.page.pageSize = pageSize
            },
            currentChange(current){
                this.page.currentPage = current
            },
            searchChange(form, done) {
                this.searchForm = form
                this.page.currentPage = 1
                this.getList(this.page, form)
                done()
            },
            refreshChange() {
                this.getList(this.page)
            }
        }
    }
</script>